﻿@page "/scheduler/timeline-view"

@using Syncfusion.Blazor.Schedule
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This demo showcases how the timeline Scheduler looks with its default set of configurations.</p>
</SampleDescription>
<ActionDescription>
    <p>Like the vertical Scheduler, timeline view has the similar view types such as </p>
     <ul>
        <li>Timeline Day</li>
        <li>Timeline Week</li>
        <li>Timeline WorkWeek</li>
        <li>Timeline Month</li>
    </ul>
    <p>The Agenda and MonthAgenda views shares the same layout for both the vertical and timeline views.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="schedule-wrapper">
        <SfSchedule TValue="ScheduleData.AppointmentData" Width="100%" Height="650px" @bind-SelectedDate="@CurrentDate">
            <ScheduleViews>
                <ScheduleView MaxEventsPerRow="12" Option="View.TimelineDay"></ScheduleView>
                <ScheduleView MaxEventsPerRow="12" Option="View.TimelineWeek"></ScheduleView>
                <ScheduleView MaxEventsPerRow="12" Option="View.TimelineWorkWeek"></ScheduleView>
                <ScheduleView MaxEventsPerRow="13" Option="View.TimelineMonth"></ScheduleView>
                <ScheduleView Option="View.Agenda"></ScheduleView>
            </ScheduleViews>
            <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
        </SfSchedule>
    </div>
</div>

@code{
    public List<ScheduleData.AppointmentData> DataSource = new ScheduleData().GetScheduleData();
    public DateTime CurrentDate = new DateTime(2020, 1, 9);
}
